<script src="../../api/dashboard/chartData.js"></script>
<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :style="{ marginBottom: '24px' }">
        <div class="charDateCard">
          <a-row :gutter="24">
            <div class="tj-title">
              <div v-action:other class="search">
                <h2 style="float: left">基础数据</h2>
                <a-select
                  style="float: left;margin: 15px 20px;"
                  @change="handleProvinceChange"
                  :defaultValue="defaultCompany"
                  placeholder="请选择所属公司">
                  <a-select-option :value="company.id" v-for="company in companyList" :key="company.id">
                    {{company.name}}
                  </a-select-option>
                </a-select>
              </div>
            </div>
          </a-row>

          <a-row :gutter="24" style="padding: 10px 20px;">

            <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
              <div class="chart-item">
                <div class="item-title">总销售额</div>
                <div class="item-info">
                  <div class="info-icon money"></div>
                  <div class="info-number">{{chartData.feeSum}}元</div>
                </div>
              </div>
            </a-col>
            <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
              <div class="chart-item">
                <div class="item-title">支付笔数</div>
                <div class="item-info">
                  <div class="info-icon pay"></div>
                  <div class="info-number">{{chartData.feeCount}}笔</div>
                </div>
              </div>
            </a-col>
            <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
              <div class="chart-item">
                <div class="item-title">优惠券领取数量</div>
                <div class="item-info">
                  <div class="info-icon tick"></div>
                  <div class="info-number">{{chartData.getCounts}}张</div>
                </div>
              </div>
            </a-col>
            <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
              <div class="chart-item">
                <div class="item-title">优惠券核销数量</div>
                <div class="item-info">
                  <div class="info-icon check"></div>
                  <div class="info-number">{{chartData.consumCounts}}张</div>
                </div>
              </div>
            </a-col>

          </a-row>
        </div>
      </a-col>
    </a-row>


    <a-row :gutter="24">

      <a-col :style="{ marginBottom: '24px' }">
        <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
          <ageSexBar ref="ageSexBar"  v-bind:companyid="companyid" v-if="true"/>
        </a-card>
      </a-col>

    </a-row>

    <a-row :gutter="24">
      <a-col :style="{ marginBottom: '24px' }">
        <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">

          <areaMap ref="areaMap"  v-bind:companyid="companyid" v-if="true"/>

        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="24">
      <a-col :style="{ marginBottom: '24px' }">
        <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
          <deviceLine ref="map" v-bind:companyid="companyid" v-if="true"/>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  //ly
  import ageSexBar from '../../components/chart/ageSexBar'
  import areaMap from '../../components/chart/areaMap'
  import deviceLine from '../../components/chart/deviceLine'
  import { selectAllCompany } from '../../api/system/company'
  import { getChartData } from '../../api/dashboard/chartData'

  export default {
    name: 'Analysis',
    components: {
      //ly
      ageSexBar,
      areaMap,
      deviceLine
    },
    data() {
      return {
        loading: true,
        defaultCompany: 1,
        companyList: [],
        chartData: {},
        companyid:''
      }
    },
    created() {
      setTimeout(() => {
        this.loading = !this.loading
      }, 1000)
      this.getAllCompany()
    },
    methods: {
      getAllCompany: function() {
        selectAllCompany().then(res => {
          if (res.code === 200) {
            this.companyList = res.result
            this.defaultCompany = this.companyList[0].id
            this.companyid=this.companyList[0].id
            this.getData(this.defaultCompany)
          } else {
            this.$notification.error({
              message: '错误',
              description: res.message,
              duration: 4
            })
          }
        })
      },
      handleProvinceChange(value) {
        //根据id拉取详情
        this.getData(value)
        this.$refs.map.getAllMerchant('ConsumePersonCount.vue', 'activeUsers',value);
        this.$refs.areaMap.getAllMerchant('ConsumePersonCount.vue', 'activeUsers',value);
        this.$refs.ageSexBar.getAllMerchant('ConsumePersonCount.vue', 'activeUsers',value);
      },
      // 数据详情
      getData: function(companyId) {
        this.companyid = companyId
        getChartData(companyId).then(res => {
          if (res.code === 200) {
            this.chartData = res.result
          } else {
            this.$notification.error({
              message: '错误',
              description: res.message,
              duration: 4
            })
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .charDateCard {
    background: #fff;
  }

  .tj-title {
    width: 100%;
    padding: 0 20px;

    h2 {
      line-height: 60px;
    }
  }

  .charDateCard {
    .chart-item {
      padding: 10px;
      border-radius: 10px;
      height: auto;
      border: 1px solid #e5e5e5;

      .item-title {
        font-size: 14px;
      }

      .item-info {
        width: 100%;
        height: auto;
        display: flex;

        .info-icon {
          width: 80px;
          height: 80px;
        }

        .money {
          background: url(../../assets/icons/money.png) no-repeat center;
          background-size: 50px;
        }

        .pay {
          background: url(../../assets/icons/pay.png) no-repeat center;
          background-size: 60px;
        }

        .tick {
          background: url(../../assets/icons/tick.png) no-repeat center;
          background-size: 50px;
        }

        .check {
          background: url(../../assets/icons/check.png) no-repeat center;
          background-size: 50px;

        }

        .info-number {
          flex: 1;
          line-height: 80px;
          font-size: 26px;
          text-align: right;
        }
      }
    }

    .chart-item:hover {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    }
  }


</style>
